<template>
  <div id="efficiencyChart" style="height: 350px;width: 600px"></div>
</template>

<script>
  import {queryHistoryRawValueByUri, queryCurrentRawValueByUri} from "../../api/faultWarning";
  import {setEchartsHeight} from "../../utils/chartStyle";

  export default {
    name: "EffChart",
    data() {
      return {
        boilerChargeData: [],
        baseLength: 7,
        targetOpt: [],
        controlAim: '',
        controlParaName: ''
      }
    },
    props: ['id', 'uri', 'chargeUri', 'transTarget'],
    async mounted() {
      await this.start();
      window.addEventListener("resize", () => {
        if (this.myChart) {
          // 计算echarts高度
          setEchartsHeight('line-outer', 'Line' + this.id, 100)
          this.myChart.resize();
        }
      });
      setEchartsHeight('line-outer', 'Line' + this.id, 100)
      this.myChart.resize();

    },
    watch: {
      transTarget() {
        console.log('transTarget', this.transTarget);
        this.addOptData();
        this.myChart.setOption(this.option, true);
      }
    },
    beforeDestroy() {
      console.log("clearInterval");
      clearInterval(this.interval);
    },
    methods: {
      async start() {
        this.firstFlag = true;
        await this.getData();
        this.interval = setInterval(this.getData, 1000);
      },
      queryHistory(uri, timeInterval) {
        let now = new Date().getTime();
        let param = {
          "nodes": [
            {
              "browsePath": uri
            }
          ],
          "detail": {
            "maxSizePerNode": this.baseLength,
            "returnBounds": false,
            "startTime": now,
            "endTime": now - timeInterval
          }
        };
        return queryHistoryRawValueByUri(param);
      },
      async getData() {
        console.log('transTarget', this.transTarget);
        let tmpMap = new Map();
        if (this.firstFlag) {
          this.firstFlag = false;
          await this.queryHistory(this.uri, 3600000).then(res => {
            let data;
            try {
              data = res.data.result[0].historyData;
            } catch (e) {
              // console.log(e)
              // console.log(res.data)
              this.firstFlag = true;
              return;
            }

            tmpMap.set('effData', data);
            this.drawChart(tmpMap);
          });
          await this.queryHistory(this.chargeUri, 3600000).then(res => {
            let data;
            try {
              data = res.data.result[0].historyData;
            } catch (e) {
              // console.log(e)
              // console.log(res.data)
              this.firstFlag = true;
              return;
            }
            tmpMap.set('chargeData', data);
            this.drawChart(tmpMap);
          });
        } else {
          let param1 = [this.uri, this.chargeUri];
          await queryCurrentRawValueByUri(param1).then(res => {
            let data1 = res.data.result[0];
            let data2 = res.data.result[1];
            this.$emit('currentEffValue', data1);
            this.addChartData(data1, data2);
          });

        }


      },
      drawChart(data) {
        const chartDom = document.getElementById('efficiencyChart');
        this.myChart = this.$echarts.init(chartDom);
        if (data.has('effData')) {
          this.chartData = data.get('effData').map(item => [item.t, item.v.toFixed(2)]).reverse();
        }
        if (data.has('chargeData')) {
          this.boilerChargeData = data.get('chargeData').map(item => [item.t, item.v.toFixed(2)]).reverse();
        }
        console.log('boilerChargeData', this.boilerChargeData);
        this.option = {
          tooltip: {
            trigger: 'axis',
            formatter: function (params) {

              if (params[0].seriesName === '目标效率') {
                console.log('params', params);
                return params[0].axisValueLabel + '</br>' + params[0].seriesName + '：'
                  + params[0].value[1] + '</br>' + params[0].value[2] + '：'
                  + params[0].value[3] + '</br>' + params[0].value[4] + '：'
                  + params[0].value[5] + '</br>' + params[0].value[6] + '：'
                  + params[0].value[7];
              } else {
                return params[0].axisValueLabel + '</br>' +
                  params[0].seriesName + '：' + params[0].value[1];
              }

            }
          },
          xAxis: {
            type: "time",
            splitNumber: 3
          },
          yAxis: {
            min: 50.00,
            max: 100.00,
            interval: 10.00,
            axisLabel: {
              formatter: function (value, index) {
                return (value).toFixed(2) + "%";
              }
            },
            scale: true
          },
          series: [
            {
              name: '实时效率',
              data: this.chartData,
              type: 'line',
              smooth: 0.5,
              itemStyle: {
                color: '#7bfe87'
              },
              lineStyle: {
                width: 2,
              },
              areaStyle: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#7bfe87'
                }, {
                  offset: 1,
                  color: 'rgba(204,204,204,0)'
                }])
              }
            },
            {
              name: '锅炉负荷',
              data: this.boilerChargeData,
              type: 'line',
              smooth: 0.5,
              itemStyle: {
                color: '#87CEFA'
              },
              lineStyle: {
                width: 2,
              },
              areaStyle: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#87CEFA'
                }, {
                  offset: 1,
                  color: 'rgba(204,204,204,0)'
                }])
              }
            },
            {
              name: '目标效率',
              data: this.targetOpt,
              type: 'scatter',
              itemStyle: {
                color: '#50a3ba'
              },
            }
          ]
        };

        this.myChart.setOption(this.option);
      },

      addChartData(data1, data2) {
        if (this.chartData.length >= this.baseLength + 6)
          this.chartData.splice(0, 1);
        if (this.chartData[this.chartData.length - 1][0] !== data1.t) {
          this.chartData.push([data1.t, data1.v.toFixed(2)])
        }
        if (this.boilerChargeData.length >= this.baseLength + 6)
          this.boilerChargeData.splice(0, 1);
        if (this.boilerChargeData[this.boilerChargeData.length - 1][0] !== data2.t) {
          this.boilerChargeData.push([data2.t, data2.v.toFixed(2)])
        }
        if (this.targetOpt[0][0] < this.chartData[0][0]) {
          this.targetOpt.splice(0, 1);
        }
        this.myChart.setOption(this.option);
      },
      addOptData() {
        this.targetOpt.push(this.transTarget[0]);

        if (this.targetOpt.length >= 4) {
          this.targetOpt.splice(0, 1);
        }


      }
    }
  }

</script>

<style scoped>

</style>
